<!--
 * @Author: your name
 * @Date: 2021-07-20 14:21:01
 * @LastEditTime: 2021-10-19 09:05:43
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \usp-osm-frondend\src\views\orderCenter\suborder\details.vue
-->
<template>
  <div v-loading="pageLoading" element-loading-text="loading">
    <div class="newPageTitle">
      <span class="backIcon" @click="goBack"><i class="el-icon-back"></i></span>
      <h1 style="display: inline-block; margin-left: 10px; font-weight: bold">
        订单详情
      </h1>
    </div>
    <div class="content">
      <div class="detail-content-section">
        <h2>关联主订单信息</h2>
        <el-form label-width="130px" label-position="left">
          <el-row :gutter="40">
            <el-col :span="8">
              <el-form-item label="主订单号：">
                {{ datas.responseOrderVo.orderNo }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="用户ID：">
                {{ datas.responseOrderVo.customerId }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="用户姓名：">
                {{ datas.responseOrderVo.customerName }}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="40">
            <el-col :span="8">
              <el-form-item label="用户邮箱：">
                {{ datas.responseOrderVo.customerEmail }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="VIN：">
                {{ datas.responseOrderVo.vin }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="用户手机号：">
                {{ datas.responseOrderVo.customerMobile }}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="40">
            <el-col :span="8">
              <el-form-item label="车牌号：">
                {{ datas.responseOrderVo.plateNumber }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="主订单创建时间：">
                {{
                  datas.responseOrderVo.createTime | timestampToChange('time')
                }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="主订单更新时间：">
                {{
                  datas.responseOrderVo.updateTime | timestampToChange('time')
                }}
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="detail-content-section">
        <h2>收货信息</h2>
        <el-form label-width="100px" label-position="right">
          <el-row :gutter="40">
            <el-col :span="8">
              <el-form-item label="联系人姓名：">
                {{ datas.responseOrderCustomerAddressVo.contactName }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="联系人电话：">
                {{ datas.responseOrderCustomerAddressVo.contactMobile }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="联系人邮箱：">
                {{ datas.responseOrderCustomerAddressVo.contactEmail }}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="40">
            <el-col :span="8">
              <el-form-item label="省份：">
                {{ datas.responseOrderCustomerAddressVo.province }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="城市：">
                {{ datas.responseOrderCustomerAddressVo.city }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="地区：">
                {{ datas.responseOrderCustomerAddressVo.region }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="详细地址：">
                {{ datas.responseOrderCustomerAddressVo.address }}
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="detail-content-section">
        <h2>
          <span>子订单信息</span>
          <span
            >子订单状态：{{
              getDictionaryNameByCode(
                'SUBORDERSTATUS',
                datas.responseSubOrderVo.status
              )
            }}</span
          >
        </h2>
        <el-form label-width="130px" label-position="left">
          <el-row :gutter="40">
            <el-col :span="8">
              <el-form-item label="子订单号：">
                {{ datas.responseSubOrderVo.suborderNo }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="订单类型：">
                {{
                  getDictionaryNameByCode(
                    'SUBORDERTYPE',
                    datas.responseSubOrderVo.subOrderType
                  )
                }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="配送方式：">
                {{
                  getDictionaryNameByCode(
                    'SUBORDERDELIVERYMETHOD',
                    datas.responseSubOrderVo.deliveryMethod
                  )
                }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="门店Code：">
                {{
                  datas.responseSubOrderVo.deliveryMethod === '2'
                    ? datas.responseSubOrderVo.storeCode
                    : ''
                }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="关联整车订单号：">
                {{ datas.responseSubOrderVo.relatedCarOrderNo }}
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div style="margin: 10px 0px">
          <el-button
            class="dark-btn"
            v-if="datas.showApplyRefundButton"
            @click="applyRefund"
            >申请退款</el-button
          >
        </div>
        <el-table :data="datas.responseSubOrderVo.responseSubOrderItemsVoList">
          <el-table-column
            label="商品名称 (SPU Name)"
            align="center"
            min-width="160"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              {{ scope.row.spuName }}
            </template>
          </el-table-column>
          <el-table-column
            label="SKU Code"
            align="center"
            min-width="120"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              {{ scope.row.skuCode }}
            </template>
          </el-table-column>
          <el-table-column
            label="SPU Code"
            align="center"
            min-width="120"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              {{ scope.row.spuCode }}
            </template>
          </el-table-column>
          <el-table-column
            label="购买数量"
            align="center"
            min-width="70"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              {{ scope.row.quantity }}
            </template>
          </el-table-column>
          <el-table-column
            label="金额"
            align="center"
            min-width="120"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              {{ scope.row.totalAmount | numFormat }}
            </template>
          </el-table-column>
          <el-table-column
            label="子订单创建时间"
            align="center"
            min-width="160"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              {{ scope.row.createTime | timestampToChange('time') }}
            </template>
          </el-table-column>
          <el-table-column
            label="子订单更新时间"
            align="center"
            min-width="160"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              {{ scope.row.updateTime | timestampToChange('time') }}
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="detail-content-section">
        <h2>
          <span>发票信息</span>
        </h2>
        <el-table :data="datas.responseSubOrderInvoiceVoList">
          <el-table-column
            label="发票序号"
            align="center"
            min-width="160"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column
            label="开票状态"
            align="center"
            min-width="120"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              {{ getDictionaryNameByCode('BILLINGSTATES', scope.row.states)  }}
            </template>
          </el-table-column>
          <el-table-column
            label="发票代码"
            align="center"
            min-width="120"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              {{ scope.row.invoiceCode }}
            </template>
          </el-table-column>
          <el-table-column
            label="发票号码"
            align="center"
            min-width="70"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              {{ scope.row.invoiceNo }}
            </template>
          </el-table-column>
          <el-table-column
            label="开票时间"
            align="center"
            min-width="120"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              {{ scope.row.billingTime }}
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            min-width="160"
            fixed="right"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              <span class="colorLink" @click="viewTickDetail(scope.row)">查看发票详情</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <el-dialog
      title="发起退款申请"
      :visible.sync="isShow"
      width="50%"
      top="0"
      append-to-body
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :wrapperClosable="false"
      destroy-on-close
      :before-close="handleClose"
    >
      <v-table
        :header="false"
        border
        :pagination="false"
        :data="datas.responseSubOrderVo.responseSubOrderItemsVoList"
      >
        <el-table-column
          label="商品名称"
          align="center"
          prop="spuName"
          min-width="110"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          label="SKU"
          align="center"
          prop="skuCode"
          min-width="110"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          label="数量"
          align="center"
          prop="quantity"
          min-width="110"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          label="总金额"
          align="center"
          prop="totalAmount"
          min-width="110"
          :show-overflow-tooltip="true"
        ></el-table-column>
      </v-table>
      <el-form ref="formData" :model="formData" :rules="rules" label-position="left">
        <el-form-item label="退款备注信息：" prop="refundMark">
          <el-input
            type="textarea"
            placeholder="请输入备注内容"
            v-model="formData.refundMark"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose" class="white-btn">取消</el-button>
        <el-button @click="onSubmit" :loading="submitting" class="search-btn">
          确定
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { setRouterParams, getRouterParams } from '@/utils/auth'
import { getChildDetail, saveRefundOrder } from '@/api/order'
import VTable from '@/components/PageTable/index'
import { common } from '@/mixins/common'
import { mapGetters } from 'vuex'
export default {
  name: 'suborderDetails',
  components: {
    VTable
  },
  data () {
    return {
      datas: {
        responseOrderVo: {},
        responseSubOrderItemsVoList: [],
        responseOrderCustomerAddressVo: {},
        responseSubOrderVo: {}
      },
      pageLoading: false,
      id: '',
      isShow: false,
      formData: {
        refundMark: ''
      },
      rules: {
        refundMark: [
          { required: true, message: '请输入备注信息', trigger: 'blur' }
        ]
      },
      submitting: false
    }
  },
  mixins: [common],
  computed: {
    ...mapGetters(['lookupItems'])
  },
  mounted () {
    let params = {}
    if (this.$route.params.id) {
      setRouterParams(this.$route)
      params = this.$route.params
    } else {
      params = getRouterParams(this.$route)
    }
    const id = params.id
    this.id = params.id
    this.getChildDetailInfo(id)
  },
  methods: {
    goBack () {
      this.$router.go(-1)
    },
    getChildDetailInfo (id) {
      this.pageLoading = true
      getChildDetail(id)
        .then((res) => {
          if (res) {
            if (Number(res.code) === 1) {
              this.datas = res.obj
              if (
                res.obj.responseSubOrderVo.subOrderType === '1' ||
                res.obj.responseOrderCustomerAddressVo === null
              ) {
                this.datas.responseOrderCustomerAddressVo = {
                  contactEmail: '无',
                  contactMobile: '无',
                  contactName: '无',
                  totalAddress: '无',
                  province: '无',
                  city: '无',
                  region: '无',
                  address: '无'
                }
              }
            } else {
              this.$alert('获取主订单详情失败')
            }
            this.pageLoading = false
          }
        })
        .catch(() => {
          this.pageLoading = false
          this.$alert('获取主订单详情失败')
        })
    },
    applyRefund () {
      this.isShow = true
    },
    handleClose () {
      this.isShow = false
      this.formData = {
        refundMark: ''
      }
    },
    onSubmit () {
      this.$refs.formData.validate(valid => {
        if (valid) {
          this.submitting = true
          const refundData = this.datas.responseSubOrderVo.responseSubOrderItemsVoList
          refundData.forEach(item => {
            item.orderId = this.datas.responseSubOrderVo.id
            item.refundReason = this.formData.refundMark
            item.refundStatus = '1'
            item.subOrderId = this.datas.responseSubOrderVo.orderId
            item.subOrderItemId = item.id
            item.unitPrice = item.totalAmount
          })
          const params = {
            orderRefundEntityVo: {
              applyRefundDate: new Date(),
              customerId: this.datas.responseOrderVo.customerId,
              customerName: this.datas.responseOrderVo.customerName,
              customerMobile: this.datas.responseOrderVo.customerMobile,
              orderId: this.datas.responseSubOrderVo.id,
              refundNo: this.datas.responseOrderVo.orderNo,
              refundStatus: '1',
              returnReasonRemark: this.formData.refundMark,
              subOrderId: this.datas.responseSubOrderVo.orderId
            },
            orderRefundItemsVoList: refundData,
            subOrderType: this.datas.responseSubOrderVo.subOrderType
          }
          saveRefundOrder(params).then(res => {
            if (res) {
              if (Number(res.code) === 1) {
                this.$alert('操作成功', {
                  showClose: false,
                  callback: action => {
                    this.getChildDetailInfo(this.id)
                  }
                })
              } else {
                this.$alert(res.msg)
              }
            }
          })
          this.submitting = false
          this.handleClose()
        }
      })
    },
    viewTickDetail (row) {
      this.$router.push({ name: 'invoiceDetails', params: { id: row.id } })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

.dialog-footer {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

</style>
